<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>考场管理-调换考场</title>
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style type="text/css">
        .layui-body{
            padding-bottom: 0 !important;
        }
        #test1{
            /*border: 1px solid red;*/
            width: 1300px;
            height: 609px;
            margin-top: 6px;
            margin-left: 10px;
            display: flex;
            position: relative;
        }
        #test3{
            /*height: 360px;*/
        }
        body::-webkit-scrollbar{
            width: 10px;
        }
        #test1 .table-search-fieldset{
            border: 1px solid black;
            width: 440px;
            height: 600px;
        }
        #test1 .table-search-fieldset:nth-child(2){
            margin-left: 140px;
        }
        #test4{
            /*border: 1px solid orange;*/
            position: absolute;
            top: 144px;
            left: 30px;
        }
        #test6{
            position: absolute;
            top: 300px;
            left: 521px;
            /*display: none;*/
            width: 47px;
            height: 28px;
        }
        .layui-transfer-data{
            border: 1px solid black;
            height: 430px !important;
        }
        .layui-transfer-box{
            width: 420px !important;
            height: 470px !important;
        }
        .layui-transfer-active .layui-btn-disabled{
            border: 1px solid black;
            color: black;
        }
        .layui-transfer-active button:nth-child(2){
            margin-top: 100px;
        }
        .layui-transfer-active{
            margin: 0 69px;
        }
        .layui-input{
            height: 30px;
        }
        #test5{
            /*border: 1px solid red;*/
            width: 100px;
            height: 80px;
            margin-left: 60px;
            margin-top: 200px;
        }
        .layui-btn + .layui-btn{
            margin-left: 0;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="test1">
    <fieldset class="table-search-fieldset">
        <legend>考场1</legend>
        <form class="layui-form" action="" >
            <div style="display: flex">
                <div class="layui-inline" style="width: 150px;margin-left: 9px">
                    <select id="course" name="cname">
                        <option value="">课程名</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 250px;margin-left: 20px">
                    <select lay-filter="room" id="room" name="cname">
                        <option value="">机房</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="width: 420px;margin-left: 9px;margin-top: 10px">
                <select lay-filter="kaochang" id="kaochang" name="cname">
                    <option value="">考场</option>
                </select>
            </div>
            <div style="display: flex;margin-top: 12px;margin-left: 9px">
                <span>机房容量：<span id="roomAddr" style="color: red"></span></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>考场人数：<span id="numbers" style="color: red"></span></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>剩余容量：<span id="shenyuronglaing" style="color: red"></span></span>
            </div>
        </form>
    </fieldset>

    <fieldset class="table-search-fieldset">
        <legend>考场2</legend>
        <form class="layui-form" action="" >
            <div style="display: flex">
                <div class="layui-inline" style="width: 150px;margin-left: 9px">
                    <select  id="course2" name="cname">
                        <option value="">课程名</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 250px;margin-left: 20px">
                    <select lay-filter="room2" id="room2" name="cname">
                        <option value="">机房</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="width: 420px;margin-left: 9px;margin-top: 12px">
                <select lay-filter="kaochang2" id="kaochang2" name="cname">
                    <option value="">考场</option>
                </select>
            </div>
            <div style="display: flex;margin-top: 12px;margin-left: 9px">
                <span>机房容量：<span id="roomAddr2" style="color: red"></span></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>考场人数：<span id="numbers2" style="color: red"></span></span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>剩余容量：<span id="shenyuronglaing2" style="color: red"></span></span>
            </div>
        </form>
    </fieldset>

    <div class="layui-inline" id="test5">
        <button id="btn-search2" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-sm">
            <i class="layui-icon layui-icon-search"></i>
            开始调换
        </button>
        <button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-sm">
            <i class="layui-icon layui-icon-fonts-clear"></i>
            取消调换
        </button>
    </div>
</div>

<div id="test4">
    <div id="test3" class="demo-transfer"></div>
</div>

<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery-3.6.0.min.js}" charset="utf-8"></script>
<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js}"></script>
<script th:inline="javascript">
    layui.use(['form','transfer', 'layer', 'util'], function() {
        var form = layui.form;
        var $ = layui.$
            , transfer = layui.transfer
            , layer = layui.layer
            , util = layui.util;

        layer.msg("可以对已经安排好的考生的考场进行调整！");

        function mychange(id) {
            if(id==1) return "花津校区";
            if(id==2) return "赭山校区";
            if(id==3) return "天门山校区";
        }

        $("#btn-reset").click(function () {
            window.location.reload()
        });

        //渲染机房考试时间段列表（左边）
        form.on('select(room)',function (data){
            // console.log(data.value);
            // console.log($("#course").val());
            $.ajax({  //机房容量
                url:"/cntRoom",
                data:{
                    "roomAddr":data.value
                },
                success:function (res) {
                    if(res.state==0){
                        // console.log(res.data);
                        document.getElementById("roomAddr").innerText=res.data;
                    }
                }
            });
            $.ajax({  //考试时间段下拉列表
                url:"/ClearRoomStu",
                data:{
                    "cname":$("#course").val(),
                    "roomAddr":data.value
                },
                success:function (res) {
                    if(res.code==0){
                        // console.log(res.data);
                        let a="考场";
                        $("#kaochang").empty();
                        $("#kaochang").append('<option value="">'+a+'</option>')
                        for(let i=0;i<res.data.length;i++){
                            // console.log(res.data[i].examDate.split(" ")[0])
                            let str=res.data[i].erordId+"     "+res.data[i].examDate.split(" ")[0]+
                                "     "+res.data[i].estartTime.split(" ")[1]+"~"+res.data[i].eendTime.split(" ")[1]+
                                "     "+res.data[i].enumber;
                            $("#kaochang").append(
                                '<option value="'+str+'">'+str+'</option>'
                            )
                        }
                        form.render();
                    }
                }
            });
        });

        //不同考试时间段显示不同考生列表
        var datas=[];
        var index;
        form.on('select(kaochang)',function (data) {
            // console.log(data.value);
            document.getElementById("numbers").innerText=parseInt(data.value.split("     ")[3]);
            document.getElementById("shenyuronglaing").innerText=parseInt(document.getElementById("roomAddr").innerText)-parseInt(data.value.split("     ")[3]);
            var examdate=data.value.split("     ")[1];
            var erorder=data.value.split("     ")[0];
            var name=$("#course").val()
            var str="examDate="+examdate+"&erordId="+erorder+"&etype="+name;
            console.log(str);
            $.ajax({
                url:"/ClearRoomStuR?"+str,
                success:function (res) {
                    datas.splice(0,datas.length);
                    // console.log(res.data)
                    for(let i=0;i<res.data.length;i++){
                        let arr={"value":i,"title":res.data[i].stuId+"   "+res.data[i].stuName+"   "+res.data[i].teaName+"   "+mychange(res.data[i].campus)};
                        datas.push(arr);
                    }
                    index=datas.length;
                    // console.log(datas)
                    transfer.render({
                        elem: '#test3',
                        title: ['考场1', '考场2'],  //自定义标题
                        data: datas,
                        id:'key123'
                    });

                }
            });
        });

        //渲染机房考试时间段列表(右边)
        form.on('select(room2)',function (data){
            // console.log(data.value);
            // console.log($("#course2").val());
            $.ajax({
                url:"/cntRoom",
                data:{
                    "roomAddr":data.value
                },
                success:function (res) {
                    if(res.state==0){
                        // console.log(res.data);
                        document.getElementById("roomAddr2").innerText=res.data;
                    }
                }
            });
            $.ajax({
                url:"/ClearRoomStu",
                data:{
                    "cname":$("#course2").val(),
                    "roomAddr":data.value
                },
                success:function (res) {
                    if(res.code==0){
                        // console.log(res.data);
                        let a="考场";
                        $("#kaochang2").empty();
                        $("#kaochang2").append('<option value="">'+a+'</option>')
                        for(let i=0;i<res.data.length;i++){
                            // console.log(res.data[i].examDate.split(" ")[0])
                            let str=res.data[i].erordId+"     "+res.data[i].examDate.split(" ")[0]+
                                "     "+res.data[i].estartTime.split(" ")[1]+"~"+res.data[i].eendTime.split(" ")[1]+
                                "     "+res.data[i].enumber;
                            $("#kaochang2").append(
                                '<option value="'+str+'">'+str+'</option>'
                            )
                        }
                        form.render();
                    }
                }
            });
        });

        let left=[],right=[],left2=[],right2=[];
        form.on('select(kaochang2)',function (data) {
            // console.log(data.value);
            document.getElementById("numbers2").innerText=data.value.split("     ")[3];
            document.getElementById("shenyuronglaing2").innerText=document.getElementById("roomAddr2").innerText-data.value.split("     ")[3];
            var examdate=data.value.split("     ")[1];
            var erorder=data.value.split("     ")[0];
            var name=$("#course2").val();
            var str="examDate="+examdate+"&erordId="+erorder+"&etype="+name;
            console.log(str);
            $.ajax({
                url:"/ClearRoomStuR?"+str,
                success:function (res) {
                    let str=[];
                    // console.log(datas);
                    // console.log(res.data);
                    // console.log(index);
                    datas.splice(index,datas.length);
                    // console.log(datas);
                    let k=datas.length;
                    for(let i=0;i<res.data.length;i++){
                        let arr={"value":k+i,"title":res.data[i].stuId+"   "+res.data[i].stuName+"   "+res.data[i].teaName+"   "+mychange(res.data[i].campus)};
                        datas.push(arr);
                        str.push(k+i);
                    }
                    // console.log(str);
                    console.log(datas);
                    transfer.render({
                        elem: '#test3',
                        title: ['考场1', '考场2'],  //自定义标题
                        data: datas,
                        id:'key123',
                        value: str,
                        onchange:function (obj,index) {
                            //数量的变化
                            if(index==0){
                                document.getElementById("numbers").innerText-=obj.length;
                                document.getElementById("shenyuronglaing").innerText=parseInt(document.getElementById("shenyuronglaing").innerText)+obj.length;
                                document.getElementById("numbers2").innerText=parseInt(document.getElementById("numbers2").innerText)+obj.length;
                                document.getElementById("shenyuronglaing2").innerText-=obj.length;
                                // console.log(obj)
                                for(let i=0;i<obj.length;i++){
                                    right.push(obj[i].title);
                                }
                            }else if(index==1){
                                document.getElementById("numbers").innerText=parseInt(document.getElementById("numbers").innerText)+obj.length;
                                document.getElementById("shenyuronglaing").innerText=parseInt(document.getElementById("shenyuronglaing").innerText)-obj.length;
                                document.getElementById("numbers2").innerText=parseInt(document.getElementById("numbers2").innerText)-obj.length;
                                document.getElementById("shenyuronglaing2").innerText=parseInt(document.getElementById("shenyuronglaing2").innerText)+obj.length
                                for(let i=0;i<obj.length;i++){
                                    left.push(obj[i].title);
                                }
                            }
                            left2=left.filter(item1=>!right.some(item2=>item2==item1));
                            right2=right.filter(item1=>!left.some(item2=>item2==item1))
                            // console.log(left2)
                            // console.log(right2)
                        }
                    });
                }
            });
        });

        form.on('submit(btn-search-filter)', function(data){
            // console.log(left2);
            // console.log(right2);
            let leftStr="",rightStr="";
            for(let i=0;i<left2.length;i++){
                leftStr+=left2[i].split("   ")[0]+",";
            }
            for(let i=0;i<right2.length;i++){
                rightStr+=right2[i].split("   ")[0]+",";
            }
            leftStr=leftStr.slice(0,leftStr.length-1);
            rightStr=rightStr.slice(0,rightStr.length-1);
            let course=$("#course option:selected").text();
            let leftAddr=$("#room option:selected").text();
            let rightAddr=$("#room2 option:selected").text();
            let leftroom=$("#kaochang option:selected").text();
            let rightroom=$("#kaochang2 option:selected").text();
            let leftnumbers=document.getElementById("numbers").innerText;
            let rightnumbers=document.getElementById("numbers2").innerText;
            $.ajax({
                url:"/changeStu",
                data:{
                    "course":course,"leftAddr":leftAddr,"rightAddr":rightAddr,"leftroom":leftroom,"rightroom":rightroom,
                    "leftnumbers":leftnumbers,"rightnumbers":rightnumbers,"leftStr":leftStr,"rightStr":rightStr
                },
                success:function (res) {
                    if(res.code==200){
                        layer.msg(res.message,{
                            icon: 1,
                            time: 1000
                        },function () {
                            $("#btn-reset").click();
                        });
                    }else {
                        layer.alert(response.message,{icon:2,anim:6});
                    }
                }
            })
        });
    });

    //加载课程名
    var course=[[${cname}]];
    console.log(course)
    for(let i=0;i<course.length;i++){
        $("#course").append(
            '<option value="'+course[i]+'">'+course[i]+'</option>'
        )
        $("#course2").append(
            '<option value="'+course[i]+'">'+course[i]+'</option>'
        )
    }

    //加载机房地址
    var roomAddr=[[${roomAddr}]]
    for(let i=0;i<roomAddr.length;i++){
        $("#room").append(
            '<option value="'+roomAddr[i]+'">'+roomAddr[i]+'</option>'
        )
        $("#room2").append(
            '<option value="'+roomAddr[i]+'">'+roomAddr[i]+'</option>'
        )
    }

    // $("#room").change(function () {
    //     let opt=$("#room").val();
    //     alert(opt)
    //     console.log(opt)
    // });

</script>
</body>
</html>